<template>
      <div class='login-box'>
      <h3>欢迎来到飞翔</h3>
      <el-form :model="regForm" :rules="rules" ref="regForm" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="regForm.username" placeholder="用户名" prefix-icon="el-icon-mobile-phone"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input v-model="regForm.pwd" placeholder="密码不少于6位包含大小字母数字字符" type='password' prefix-icon="el-icon-unlock" ></el-input>
        </el-form-item>
        <el-form-item prop="checkpwd">
          <el-input v-model="regForm.checkpwd" :placeholder="tip" type='password' prefix-icon="el-icon-unlock" :class='error'></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="registerSubmit('regForm')">下一步</el-button>
      <div class="login-tip back">
        <router-link to="/login" class='login-tip-a'>&lt;返回登录</router-link>
      </div>
    </div>
</template>
<script>
import {register} from '../api/login'
export default {
  data() {
    return {
      error:'error',
      tip:'确认登录密码', //提示信息
      timer:'',
      regForm: {
        username: '',
        pwd: '',
        checkpwd:'',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        checkpwd: [
          { required: true, message: '请确认密码', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    tip:{
      handler:function(){
        if(this.tip == '确认登录密码'){
          this.error=''
        }else{
          this.error='error'
        }
      },
      immediate:true
    }
  },
  methods: {
    registerSubmit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            let {username,pwd,checkpwd}=this.regForm
            register({username,pwd,checkpwd}).then(res=>{
              console.log(res);
              if(res.code==200&&res.msg=='注册成功'){
                this.timer=setInterval(() => {
                  this.$router.push('/login')
                }, 700);
                this.$message({
                  message: res.msg,
                  type:'success'
                })
              }else{
                this.tip=res.msg
                this.regForm.checkpwd=''
              }
            })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>
<style lang='less' scoped>
  /deep/.error{
    .el-input__inner{
      &::placeholder{
        color: #ff2429;
      }
    }
  }
  .login-tip.back{
    margin-top: 50px;
  }
</style>